<template>
	<!-- 我的卡券 -->
	<view class="container position-relative w-100 h-100 overflow-hidden">
		<view class="exchange-box">
			<view class="input-box">
				<input type="text" placeholder="请输入兑换码" placeholder-class="text-color-assist font-size-base" />
				<button type="primary">兑换</button>
			</view>
			<view class="font-size-sm text-color-primary line-height-2">查看兑换规则</view>
		</view>
		<!-- 卡片抬头 -->
		<view class="tabbar">
			<view class="tab" :class="{active: activeTabIndex == index}" v-for="(item, index) in tabs" :key="index"
				@tap="handleTab(index)">
				<view class="title">{{ item.title }}</view>
			</view>
		</view>
		<!-- 卡片列表 -->
		<view class="flex-fill">
			<scroll-view scroll-y class="coupon-list">
				<view class="wrapper">
					<view class="coupon" v-for="(item, index) in coupons" :key="index" @tap="openDetailModal(item)">
						<view class="d-flex align-items-center detail">
							<image :src="item.imageUrl" class="coupon-img"></image>
							<view class="flex-fill d-flex flex-column just-content-center overflow-hidden">
								<view class="font-size-lg text-color-base text-truncate mb-10">{{ item.title }}</view>
								<view class="font-size-sm text-color-base">有效期至{{ item.endAt }}</view>
							</view>
						</view>
						<view class="d-flex align-items-center justify-content-end" style="height: 80rpx;">
							<view class="font-size-sm text-color-primary">查看详情</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 下方 -->
		<view class="bottom-box d-flex align-items-center just-content-center font-size-sm text-color-primary">
			<view class="item">历史卡券</view>
			<view class="item" @tap="showTip1">赠送记录</view>
			<view class="item" @tap="showTip2">第三方权益</view>
		</view>
		<!-- 说明框 -->
		<modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%">
			<view class="modal-content">
				<view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}
				</view>
				<view class="d-flex font-size-sm text-color-base mb-20">
					有效期：{{ coupon.beginAt }}至{{ coupon.endAt }}
				</view>
				<pre class="pre-line font-size-sm text-color-assist mb-30">
					<jyf-parser ref="couponExplain"></jyf-parser>
				</pre>
				<view class="d-flex align-items-center just-content-center">
					<button type="primary" @tap="useCoupon" class="use-coupon-btn">立即使用</button>
				</view>
			</view>
		</modal>
	</view>
</template>

<script>
	import modal from '@/components/modal/modal'
	import jyfParser from "@/components/jyf-parser/jyf-parser" //富文本控件
	export default {
		components: {
			modal,
			jyfParser
		},
		data() {

			return {
				tabs: [{
						title: '全部',
						value: 'all'
					},
					{
						title: '茶饮券',
						value: '1'
					},
					{
						title: '酒屋券',
						value: '2'
					}
				],
				activeTabIndex: '', //tab序列
				coupons: [],
				detailModalVisible: false,
				coupon: {} //说明框里内容
			};
		},
		onShow() {
			this.activeTabIndex = 0
		},
		watch: {
			activeTabIndex: async function(val) { //观察到activeTabIndex变化，执行getCoupons
				const type = this.tabs[val].value
				await this.getCoupons(type)
			}
		},
		methods: {
			handleTab(index) {
				this.activeTabIndex = index
			},
			async getCoupons(type) { //获取卡片内容
				const coupons = await this.$api('customerCoupons')
				if (type == 'all') {
					this.coupons = coupons
				} else {
					this.coupons = coupons.filter(item => item.couponType == type) //过滤数据
				}
			},
			openDetailModal(coupon) { //弹出说明框
				this.coupon = coupon
				this.detailModalVisible = true
				this.$refs['couponExplain'].setContent(this.coupon.couponExplain || '') //设置富文本
			},
			closeDetailModal() { //关闭说明框
				this.detailModalVisible = false
				this.coupon = {}
			},
			useCoupon() { //立即使用 跳转点餐页面
				uni.switchTab({
					url: '/pages/menu/menu'
				})
			},
			showTip1() {
				uni.showToast({
					title: '您暂时还没有赠送中卡券哦~',
					icon: 'none'
				})
			},
			showTip2() {
				uni.showToast({
					title: '您暂时还没有券码哦~',
					icon: 'none'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: 100%;
	}

	/* #endif */

	.container {
		display: flex;
		flex-direction: column;
	}

	.exchange-box {
		flex-shrink: 0;
		height: 200rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.input-box {
			display: flex;
			align-items: stretch;
			width: 70%;
			flex-shrink: 0;

			input {
				flex: 1;
				height: 80rpx;
				border: 1rpx solid #eee;
				border-right: 0;
				border-radius: 8rpx 0 0 8rpx;
				padding: 20rpx;
				font-size: $font-size-base;
				color: $text-color-base;
			}

			button {
				border-radius: 0 8rpx 8rpx 0;
				display: flex;
				align-items: center;
			}
		}
	}

	.tabbar {
		flex-shrink: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.tab {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: $font-size-base;
			color: $text-color-base;
			position: relative;

			.title {
				padding: 15rpx 0;
			}

			&.active {
				color: $color-primary;

				.title {
					border-bottom: 5rpx solid $color-primary;
				}
			}
		}
	}


	.bottom-box {
		height: 80rpx;
		flex-shrink: 0;

		.item {
			padding: 0 20rpx;
			position: relative;

			&::after {
				content: " ";
				border-right: 1rpx solid $text-color-assist;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				transform: scaleX(0.5) scaleY(0.8);
			}

			&:nth-last-child(1)::after {
				border-right: 0;
			}
		}
	}

	.coupon-list {
		height: calc(100vh - 80rpx - 120rpx - 200rpx);
		/* #ifdef H5 */
		height: calc(100vh - 80rpx - 120rpx - 200rpx - 44px);
		/* #endif */
	}

	.wrapper {
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;

		.coupon {
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			border-radius: 6rpx;
			box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
			position: relative;

			&::before {
				content: "";
				position: absolute;
				background-color: $bg-color;
				width: 30rpx;
				height: 30rpx;
				bottom: 65rpx;
				left: -15rpx;
				border-radius: 100%;
			}

			&::after {
				content: "";
				position: absolute;
				background-color: $bg-color;
				width: 30rpx;
				height: 30rpx;
				bottom: 65rpx;
				right: -15rpx;
				border-radius: 100%;
			}

			.detail {
				padding: 20rpx 0;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					border-bottom: 1rpx dashed #c6c6c6;
					transform: scaleY(0.5);
				}

				.coupon-img {
					width: 150rpx;
					height: 150rpx;
					margin-right: 40rpx;
				}
			}
		}
	}

	.use-coupon-btn {
		width: 95%;
		border-radius: 50rem !important;
	}
</style>